<template>
  <div class="case-card">
    <el-descriptions 
      border
      :column="2"
      size="large"
    >
      <el-descriptions-item label="被告人">
        <el-tag type="danger">{{ latestTableData.defendantName }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="犯罪期间">
        <el-tag type="info">{{ latestTableData.crimePeriod }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="犯罪行为">
        <el-tag type="warning">{{ latestTableData.criminalActs }}</el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="银行卡详情">
        <span class="highlight-text">{{ latestTableData.cardDetails }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="非法获利">
        <span class="highlight-text">{{ formatCurrency(latestTableData.illicitProfit) }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="诈骗金额">
        <span class="highlight-text">{{ formatCurrency(latestTableData.fraudAmount) }}</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="用于诈骗的银行卡" :span="2">
        <div class="bank-card-content">
          <el-tag type="danger" size="large">{{ latestTableData.cardUsedForFraud }}</el-tag>
        </div>
      </el-descriptions-item>
      
      <el-descriptions-item label="裁决结果" :span="2">
        <div class="judgment-content" v-html="latestTableData2.sentence">
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="理由内容" :span="2">
        <div class="reason-content">
          <p>{{ latestTableData2.reasonContent }}</p> 
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="犯罪描述">
        <span class="highlight-text">{{ latestTableData2.crimeCharge }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="辩护意见">
        <span class="highlight-text">{{ latestTableData2.defenseOpinion }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="核实情况">
        <span class="highlight-text">{{ latestTableData2.verification }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { User } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from 'vue'
import {
  getCaseFactList
} from '@/api/flaud/institutionalcasefact'
import {
  getJudgmentReasonList
} from '@/api/flaud/judgmentreason'

const page = ref(1)
const total = ref(0)
const pageSize = ref(1)
const tableData = ref([])
const tableData2 = ref([])
const searchInfo = ref({})

onMounted(() => {
  getTableData()
  getTableData2()
})

const getTableData = async () => {
  const table = await getCaseFactList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  console.log(tableData.value)
}

const getTableData2 = async () => {
  const table = await getJudgmentReasonList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData2.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  console.log(tableData2.value)
}

// 获取 tableData 中最新的一条数据，按 CreatedAt 降序排序
const latestTableData = computed(() => {
  if (tableData.value.length === 0) return {};
  return tableData.value.sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime())[0];
})

// 获取 tableData2 中最新的一条数据，按 CreatedAt 降序排序
const latestTableData2 = computed(() => {
  if (tableData2.value.length === 0) return {};
  return tableData2.value.sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime())[0];
})

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2
  }).format(value).replace('CN¥', '¥')
}
</script>

<style scoped>
.case-card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.highlight-text {
  font-weight: bold;
  color: #f56c6c;
}

.bank-card-content {
  padding: 8px 0;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.judgment-content {
  line-height: 1.6;
  color: #303133;
}

.reason-content {
  line-height: 1.6;
  color: #303133;
}

:deep(.el-descriptions__title) {
  font-size: 18px;
  font-weight: bold;
  color: #1a3a72;
  margin-bottom: 20px;
}

:deep(.el-descriptions__body) {
  background: #fff;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
  width: 140px;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  font-size: 14px;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
}

:deep(.el-tag--large) {
  font-size: 16px;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
}
</style>